<template>
	<view class="shopcar">
		<!-- 购物车空空如也 -->
		<view v-if="shopCart.detail !== null && shopCart.detail.length == 0" class="shopcar-nodata">
			<image class="shopcar-nodata__img" mode="widthFix" :src="$imgUrl('/shopcar/car-nodata.png')"></image>
			<view class="shopcar-nodata__text">购物车内空空如也</view>
			<view class="shopcar-nodata__btn" @click="toType">去逛逛</view>
		</view>

		<!-- 购物车有数据时 -->
		<view class="shopcar-list" v-if="shopCart.detail !== null && shopCart.detail.length > 0">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in shopCart.detail" :key="index">
					<view class="shopcar-list__box">
						<image v-if="item.checked == 1" class="shopcar-list__box__icon" mode="widthFix"
							:src="$imgUrl('/shopcar/icon-select.png')" @click="selectGoods(item)"></image>
						<image v-else class="shopcar-list__box__icon" mode="widthFix"
							:src="$imgUrl('/shopcar/icon-noselect.png')" @click="selectGoods(item)"></image>
						<view class="shopcar-list__goods">
							<view class="goods-list__box"
								:class="shopCart.detail.length - 1 !== index ? 'borderbot' : ''">
								<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
								<view class="goods-list__box__right">
									<view class="goods-list__box__top">
										<view class="goods-list__box__title">{{ item.name }}</view>
									</view>
									<view class="goods-list__box__bot">
										<view class="goods-list__box__unitPrice">
											<view class="pricetop">
												<span
													v-if="item.unitPrice !== 0">￥</span>{{ item.unitPrice !== 0 ? item.unitPrice.toFixed(2) : '******' }}
											</view>
											<!-- <view class="goods-list_price" v-if="item.vip">
												<view class="pricetitle">VIP</view>
												<view class="youhuiprice">￥<text>{{item.vip.toFixed(2)}}</text>
												</view>
											</view> -->
										</view>
										<view class="goods-list__box__unit">
											<image class="unit-icon" mode="widthFix"
												:src="$imgUrl('/components/goodslist/icon-reduce2.png')"
												@click="delGoods(item)"></image>
											<view class="number">{{ item.count }}</view>
											<image class="unit-icon" mode="widthFix"
												:src="$imgUrl('/components/goodslist/icon-plus2.png')"
												@click="addGoods(item)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<template v-slot:right>
						<view class="shopcar-list__del" @click="delNowGoods(item)">删除</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<!-- 固底内容 -->
		<view class="shopcar-topay" v-if="isLogin == 1 && userInfo.authStatus == 1">
			<!-- <view class="title" v-if="(jisuan(amount, 1)-amount) > 0">
				<view class="titleleft">
					<image class="image"
						src="https://bhzhtc.oss-cn-beijing.aliyuncs.com/sxsd/704dd6f8a2b14bccad11bfc1bf69624f.png"
						mode=""></image>
					<view>再买{{(jisuan(amount, 1)-amount).toFixed(2)}}元可<span
							style="color: #FB5152;font-size: 24rpx;">减{{jisuan(amount, 2)}}元</span></view>
				</view>
				<view class="titleright" @click="tourl">去凑单 ></view>
			</view>
			<view style="height: 80rpx" v-else=""></view> -->
			<view class="box">
				<view class="shopcar-topay__left" @click="selectAll">
					<image v-if="isSelectAll" class="shopcar-topay__icon" mode="widthFix"
						:src="$imgUrl('/shopcar/icon-select.png')"></image>
					<image v-else class="shopcar-topay__icon" mode="widthFix"
						:src="$imgUrl('/shopcar/icon-noselect.png')">
					</image>
					全选
				</view>
				<view class="shopcar-topay__right">
					<!-- {{ count }}件, -->
					<view class="shopcar-topay__right__text"><span class="unit">¥</span><span
							class="price">{{ amount.toFixed(2) }}</span>
						<!-- <view style="margin-left: 24rpx;" v-if="amount">已减{{ jianamount(amount) }}元</view> -->
					</view>
					<view class="shopcar-topay__right__btn" @click="toCreateOrder" v-if="amountlist.baoyou <= amount">
						去结算
					</view>
					<view v-else="" style="color: #666666">差¥{{(amountlist.baoyou-amount).toFixed(2)}}起送</view>
				</view>
			</view>
		</view>


		<!-- 为您推荐 -->
		<view class="shopcar-recommend" v-if="listData.length > 0">
			<view class="shopcar-recommend__title">
				<image class="shopcar-recommend__icon" mode="widthFix" :src="$imgUrl('/shopcar/icon-recommend.png')">
				</image>
				<view>为您推荐</view>
			</view>
			<goods-list :listData="listData" :ishome="true"></goods-list>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/typeList.vue'
	import {
		accAdd,
		accMul
	} from '@/utils/index.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		goods
	} from '@/apis/apis.js'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				listData: [],
				amountlist: []
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo', 'shopCart']),
			count() {
				let count = 0
				if (this.shopCart.detail) {
					for (let i = 0; i < this.shopCart.detail.length; i++) {
						if (this.shopCart.detail[i].checked == 1) {
							count += this.shopCart.detail[i].count
						}
					}
				}
				return count
			},
			amount() {
				let amount = 0
				if (this.shopCart.detail) {
					for (let i = 0; i < this.shopCart?.detail?.length; i++) {
						if (this.shopCart.detail[i].checked == 1) {
							if (this.userInfo.vip == 0) {
								amount = accAdd(amount, accMul(this.shopCart.detail[i].count, this.shopCart.detail[i]
									.unitPrice))
							} else {
								amount = accAdd(amount, accMul(this.shopCart.detail[i].count, this.shopCart.detail[i]
									.vip))
							}
						}
					}
				}
				return amount
			},
			isSelectAll() {
				let flag = true
				for (let i = 0; i < this.shopCart.detail.length; i++) {
					if (this.shopCart.detail[i].checked != 1) {
						flag = false
					}
				}
				return flag
			}
		},
		onLoad() {
			if (this.isLogin === 1) {
				this.getShopCart()
				this.getList()
			} else if (this.isLogin === 2) {
				this.login()
			}
			this.$apis.goods.goodsAmount().then(res => {
				console.log(res)
				this.amountlist = res.data
			})
		},
		methods: {
			...mapActions(['getShopCart', 'login', 'setCreateOrderData']),
			// 为您推荐
			async getList() {
				const data = await this.$apis.goods.goodsList({
					pageNum: 1,
					pageSize: 30
				})
				this.listData = data.rows
			},
			jianamount(amount) {
				var price = 0
				if (this.amountlist && this.amountlist.manjians == undefined) {
					console.log(123)
					return 0
				}
				try {
					this.amountlist.manjians.forEach((item, index) => {
						if (amount >= item.man) {
							price = item.jian
							throw new Error('error')
						}
					})
				} catch (e) {
					if (e.message == 'false') {
						return
					}
				}

				return price
			},
			jisuan(amount, type) {
				var price = 0
				if (this.amountlist && this.amountlist.manjians == undefined) {
					console.log(123)
					return 0
				}
				try {
					this.amountlist.manjians.forEach((item, index) => {
						if ((amount + 100) >= item.man) {
							if (type == 1) {
								price = item.man
							} else {
								price = item.jian
							}

							throw new Error('error')
						}
					})
				} catch (e) {
					if (e.message == 'false') {
						return
					}
				}

				return price
			},
			// 去逛逛
			toType() {
				uni.switchTab({
					url: '/pages/type/index'
				})
			},
			tourl() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 单选选择
			async selectGoods(item) {
				uni.showLoading({
					mask: true
				})
				let checked = item.checked == 1 ? 0 : 1
				await this.$apis.order.checked({
					checked,
					ids: item.id
				})
				this.getShopCart()
				uni.hideLoading()
			},
			async selectAll() {
				uni.showLoading({
					mask: true
				})
				let list = []
				for (let i = 0; i < this.shopCart.detail.length; i++) {
					list.push(this.shopCart.detail[i].id)
				}
				if (this.isSelectAll) {
					await this.$apis.order.checked({
						checked: '0',
						ids: list.join(',')
					})
					this.getShopCart()
				} else {
					await this.$apis.order.checked({
						checked: '1',
						ids: list.join(',')
					})
					this.getShopCart()
				}
				uni.hideLoading()
			},
			addGoods(item) {
				uni.showLoading()
				let that = this
				this.$apis.order.addCart({
						count: 1,
						goodsId: item.goodsId
					})
					.then(res => {
						uni.hideLoading()
						that.getShopCart()
					})
			},
			delGoods(item) {
				uni.showLoading()
				let that = this
				this.$apis.order.delCart({
						count: -1,
						goodsId: item.goodsId,
						id: item.id
					})
					.then(res => {
						uni.hideLoading()
						that.getShopCart()
					})
			},
			delNowGoods(item) {
				uni.showLoading()
				let that = this
				this.$apis.order.delCart({
						count: -item.count,
						goodsId: item.goodsId,
						id: item.id
					})
					.then(res => {
						uni.hideLoading()
						that.getShopCart()
					})
			},
			toCreateOrder() {
				let arr = []
				for (let i = 0; i < this.shopCart.detail.length; i++) {
					if (this.shopCart.detail[i].checked == 1) {
						arr.push(this.shopCart.detail[i])
					}
				}
				if (arr.length === 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				console.log(arr)
				this.setCreateOrderData(arr)
				// this.$apis.order.createOrder({
				// 	type: 0,
				// 	ids: arr.map((item, index) => {
				// 		return item.id
				// 	}).join(','),
				// 	delivery: 0,
				// }).then(res => {
				// 	console.log(res, 213123)
				// 	if (res.code == 500) return uni.showToast({
				// 		title: res.msg,
				// 		icon: 'none'
				// 	})
				// 	uni.navigateTo({
				// 		url: `/pages/order/createOrder/index?data=${JSON.stringify(res.data)}`
				// 	})
				// })
				uni.navigateTo({
					url: `/pages/order/createOrder/index?data=${JSON.stringify(arr.map((item, index) => {
						return item.id
					}).join(','),)}`
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.shopcar {
		padding: 20rpx;
		background: #F6F6F6;

		.shopcar-nodata {
			width: 710rpx;
			height: 532rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.shopcar-nodata__img {
			width: 266rpx;
			height: 184rpx;
			margin-top: 93rpx;
		}

		.shopcar-nodata__text {
			font-size: 30rpx;
			color: #333333;
			margin-top: 35rpx;
		}

		.shopcar-nodata__btn {
			width: 302rpx;
			height: 74rpx;
			background: #FB4041;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 52rpx;
		}

		.shopcar-recommend {
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 32rpx 24rpx;
			padding-bottom: 110rpx;

			.shopcar-recommend__title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 32rpx;

				.shopcar-recommend__icon {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.shopcar-list {
			background: #FFFFFF;
			border-radius: 16rpx;

			.shopcar-list__del {
				width: 144rpx;
				height: 245rpx;
				background: #FB4041;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.shopcar-list__box__icon {
				width: 44rpx;
				height: 44rpx;
				margin-right: 28rpx;
			}

			.shopcar-list__box {
				height: 226rpx;
				padding: 24rpx 28rpx 0rpx 28rpx;
				display: flex;
				align-items: center;
			}

			.borderbot {
				border-bottom: 1rpx solid #E2E2E2;
			}

			.goods-list__box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding-bottom: 24rpx;

				.goods-list__box__image {
					width: 202rpx;
					height: 202rpx;
					border-radius: 12rpx;
					margin-right: 16rpx;
				}

				.goods-list__box__right {
					width: 363rpx;
					height: 202rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

				}

				.goods-list__box__title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					line-height: 40rpx;
					width: 100%;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.goods-list__box__bot {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}


				.goods-list__box__unitPrice {
					.pricetop {
						font-size: 36rpx;
						font-weight: bold;
						color: #FB4041;

						span {
							font-size: 26rpx;
						}
					}

					.goods-list_price {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-top: 6rpx;

						.pricetitle {
							width: 60rpx;
							height: 32rpx;
							color: #FBE6C7;
							font-size: 24rpx;
							background-color: #3F3F47;
							border-radius: 6rpx 0 0 6rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.youhuiprice {
							background-color: #FBE6C7;
							font-size: 20rpx;
							padding: 0 8rpx;
							height: 32rpx;
							color: #3F3F47;
							box-sizing: border-box;
							font-weight: 600;
							border-radius: 0 6rpx 6rpx 0;

							text {
								font-size: 26rpx;
							}
						}
					}
				}

				.goods-list__box__unit {
					display: flex;
					align-items: center;

					.unit-icon {
						width: 54rpx;
						height: 54rpx;
					}

					.number {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 20rpx;
					}
				}

			}
		}


		.shopcar-topay {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 5;
			width: 100%;
			height: 100rpx;
			padding: 0 20rpx 0 24rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			box-sizing: border-box;

			.title {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #FEF7F6;
				font-size: 24rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.titleleft {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.image {
						width: 136rpx;
						height: 40rpx;
						margin-right: 22rpx;
					}
				}

				.titleright {
					color: #FB4041;
				}
			}

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				height: 96rpx;

				.shopcar-topay__left {
					font-size: 24rpx;
					color: #666666;
					display: flex;
					align-items: center;
				}

				.shopcar-topay__icon {
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}

				.shopcar-topay__right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
				}

				.shopcar-topay__right__text {
					font-size: 28rpx;
					color: #666666;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-left: 15rpx;

					.unit {
						color: #FB4041;
					}

					.price {
						font-size: 36rpx;
						color: #FB4041;
					}
				}

				.shopcar-topay__right__btn {
					width: 206rpx;
					height: 74rpx;
					background: #FB4041;
					border-radius: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>